<template>
    <div class="CardSolutionStopPayment">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->卡解止付</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <!-- <div class="tab-header">
                    <div class="headerTitles text_center">卡解止付 </div>
                </div>-->
                <div>
                    <el-form ref="formData" :model="formData" label-width="150px">
                        <el-row>
                            <el-col :span="8">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <el-input :disabled="true" v-model="formData.CARDNO"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8" :offset="8">
                                <div class="text_center">
                                    <el-button
                                        type="primary"
                                        :disabled="isSureCard"
                                        @click="submitFormCardStopPaymen"
                                    >解止付</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="卡解止付"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要解止付该卡片吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handerCardStopPayment"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
                <!-- <div v-show="isShowSuccess">
                     <el-row>
                        <el-col :span="22" >
                            <div class="text_center width30">
                               卡号{{this.CardStopPaymentInfo.CARDNO}} 解止付成功！时间:{{}}
                            </div>
                        </el-col>
                    </el-row>
                     <div class="text_center">
                        <el-button @click="handleClose">关闭</el-button>
                    </div>
                </div>-->
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import {
    trimString, closePage, getDictMappingValue, updateDeal3004, updateDeal3601,
} from '@/utils/Common';

export default {
    name: 'CardSolutionStopPayment',
    data() {
        return {
            formData: {
                CARDNO: '',
                BEGDATE: '',
            },
            centerDialogVisible: false, // 弹框是否展示
            defaultParams: {}, // 请求头参数
            isShowSuccess: false, // 展示成功失败信息
            CardStopPaymentInfo: {}, // 卡止付成功信息
            // isSureCard:false,//是否可以卡止付

        };
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'pinFlag',
        ]),
        // 卡片状态 为B      //可以解止付 ISSUEREAS
        isSureCard() {
            if ((`${this.cardInfo_3004.CARDSTAT}`).trim() === 'B') {
                return false;
            }
            return true;
        },
    },
    mounted() {
        this.formData = {
            CARDNO: this.cardInfo_3004.CARDNO,
            BEGDATE: this.cardInfo_3004.CARDNO,
            OPTION: '000000000000000', // 检查项目选择
            CANCODE: '', // 挂失代码
            CALFEEFLG: '', // 挂失收费标志 空或0:维持系统原有挂失费收取逻辑 1:收取挂失费 2:免收挂失费，
            IDTYPE: '', // 证件种类
            CUSTID: this.cardInfo_3004.CUSTID,
        };
        this.defaultParams = this.$store.getters.defaultParams;// 更新报文
        console.log(this.cardInfo_3004.CARDSTAT, 'this.cardInfo_3004.CARDSTAT');

        // 如果 CARDSTAT != b   且 不 == a  和 空  就是卡片状态 不正常 不能
        const CARDSTAT_Value = (`${this.cardInfo_3004.CARDSTAT}`).trim();
        if (CARDSTAT_Value != 'B' && CARDSTAT_Value != 'A' && CARDSTAT_Value != '') {
            this.$alert('卡片状态不正常', '卡解止付提示', {
                customClass: 'warning', type: 'warning',
                callback: (action) => {
                    this.handleClose();
                },
            });
        }
    },
    filters: {
        isCancltm: (value) => {
            let s = '';
            if (value && trimString(`${value}`) != '') {
                const t = value.toString();
                s = `${t.substr(0, 2)}:${t.substr(2, 2)}:${t.substr(4, 2)}`;
            }
            return `${moment().format('YYYY-MM-DD')}  ${s}`;
        },
    },
    methods: {
        // 卡解止付
        submitFormCardStopPaymen() {
            this.centerDialogVisible = true;
        },
        handerCardStopPayment() {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4018';// 修改交易号
            defaultParam.body.appBody = {
                PINFLAG: this.pinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNO, // 卡号
                CANCODE: this.formData.CANCODE,// 挂失代码
                CALFEEFLG: this.formData.CALFEEFLG,// 挂失收费标志 空或0:维持系统原有挂失费收取逻辑 1:收取挂失费 2:免收挂失费，
                OPTION: this.formData.OPTION,
            };
            this.$post.common.transPort(defaultParam).then((res) => {
                console.log(res);
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4018_卡资料信息');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.CardStopPaymentInfo = cardlossofs.body.appBody;
                        // this.isShowSuccess=true;
                        // 更新3004 交易
                        updateDeal3004(this.formData.CARDNO, this);
                        updateDeal3601(this.formData.CARDNO, this.cardInfo_3004.KEYTYPE, this.formData.CUSTID, this);
                        const timeData = this.getTimeYYMM(this.CardStopPaymentInfo.CANCLTM);
                        const successMessage = `卡号：${this.CardStopPaymentInfo.CARDNBR} 解止付成功`;
                        const ts = `${cardlossofs.sysHead.busiName}提示`;
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                            callback: (action) => {
                                this.handleClose();
                            },
                        });
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
            // this.$message.success(this.formDate.CARDNO+'  此卡已挂失！');
            this.centerDialogVisible = false;
        },

        // 修改时间 格式
        getTimeYYMM(value) {
            let s = '';
            if (value && trimString(`${value}`) != '') {
                const t = value.toString();
                s = `${t.substr(0, 2)}:${t.substr(2, 2)}:${t.substr(4, 2)}`;
            }
            return `${moment().format('YYYY-MM-DD')}  ${s}`;
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>

<style lang='scss' >
.CardSolutionStopPayment {
    /* .el-input input {
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
    } */
    .el-card__header {
        padding: 8px !important;
    }
    .text_center {
        text-align: center;
    }
    .tab-header {
        padding-bottom: 20px;
    }
    .el-card__body {
        max-height: 500px;
        min-height: 400px;
    }
    .el-dialog__body p {
        text-align: left;
        padding-left: 30%;
        margin: 8px 5px;
        span {
            color: #3a8ee6;
        }
    }
    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
